﻿@page
@model ZHIMU.Pages.ForumModel
@{
}

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/isotope/js/isotope.js"></script>
<script src="~/lib/isotope/isotope.pkgd.js"></script>

<style>
    .box-shadow {
        box-shadow: 0 0rem .3rem rgb(135, 135, 135);
        margin-top: 10px;
        margin-bottom: 2px;
        margin-left: 1.5%;
        margin-right: 1.5%;
        height: 100px;
        padding: 10px;
    }

    .grid {
        padding-right: -20px;
    }

    h6 {
        color: rgb(86, 144, 235);
    }

    .t1 {
        margin-left: 10px;
    }

    .t2 {
        margin-left: 10px;
        margin-top: 10px;
    }
</style>

<div style="height:10px;"></div>

<div class="row">
    <div class="col-9">
        <div class="button-group filter-button-group">
            <button class="btn btn-outline-dark btn-sm" data-filter="*">所有</button>
            <button class="btn btn-outline-dark btn-sm" data-filter=".rcfx">日常分享</button>
            <button class="btn btn-outline-dark btn-sm" data-filter=".jy">交友</button>
            <button class="btn btn-outline-dark btn-sm" data-filter=".mj">募捐</button>
            <button class="btn btn-outline-dark btn-sm" data-filter=".gyhd">公益活动</button>
            <button class="btn btn-outline-dark btn-sm" data-filter=".jyzp">就业招聘</button>
        </div>
        <div class="grid row">
            <div class="col-11 element-item rcfx box-shadow row">
                <div class="col-9">
                    <h6>「记一次唱歌活动」</h6>
                    <div class="t1">本周末和好多论坛上的小伙伴出去见了个面，意外发现大家声音都好好听</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">aaok</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">活动娱乐</font><br />
                    <font>发帖：</font><font color="dodgerblue">RF表情帝</font><br />
                    <font>日期：</font><font>2020/10/3</font><br />
                </div>

            </div>
            <div class="col-11 element-item rcfx box-shadow row">
                <div class="col-9">
                    <h6>「音乐分享」</h6>
                    <div class="t1">发现一首洛天依的三千世界鸦杀尽，喜欢古风的朋友可以去听听吖</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">aaok</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">活动娱乐</font><br />
                    <font>发帖：</font><font color="dodgerblue">紫馨繁星</font><br />
                    <font>日期：</font><font>2020/10/1</font><br />
                </div>
            </div>
            <div class="col-11 element-item mj box-shadow row">
                <div class="col-9">
                    <h6>「求好心人的帮助」</h6>
                    <div class="t1">有谁知道北京昌平附近哪有盲文书店吗？急急急！</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">仓小萌</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">求助答疑</font><br />
                    <font>发帖：</font><font color="dodgerblue">千鹤</font><br />
                    <font>日期：</font><font>2020/9/20</font><br />
                </div>
            </div>
            <div class="col-11 element-item jy box-shadow row">
                <div class="col-9">
                    <h6>「找一热爱评剧的戏友」</h6>
                    <div class="t1">米娜桑，喜欢听评剧的小伙伴加一下我二楼的联系方式哦~</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">星空</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">悄悄话树洞</font><br />
                    <font>发帖：</font><font color="dodgerblue">の</font><br />
                    <font>日期：</font><font>2020/9/3</font><br />
                </div>
            </div>
            <div class="col-11 element-item gyhd box-shadow row">
                <div class="col-9">
                    <h6>「“守护同一片蓝天”活动正式启动」</h6>
                    <div class="t1">想线下做环保公益的湖北小伙伴戳这</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">粲兮.烙儿</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">志愿公益</font><br />
                    <font>发帖：</font><font color="dodgerblue">神秘贪狼</font><br />
                    <font>日期：</font><font>2020/8/15</font><br />
                </div>
            </div>
            <div class="col-11 element-item jyzp box-shadow row">
                <div class="col-9">
                    <h6>「钢琴调音师招聘」</h6>
                    <div class="t1">钢琴调音师职位空缺，工资面议，要求如下</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">樱小桃</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">工作招聘</font><br />
                    <font>发帖：</font><font color="dodgerblue">黄铭</font><br />
                    <font>日期：</font><font>2020/8/2</font><br />
                </div>
            </div>
            <div class="col-11 element-item jy box-shadow row">
                <div class="col-9">
                    <h6>「找一北京昌平书友」</h6>
                    <div class="t1">昌平有热爱书籍的小伙伴吗？扩个列的说</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">星空</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">悄悄话树洞</font><br />
                    <font>发帖：</font><font color="dodgerblue">苍城</font><br />
                    <font>日期：</font><font>2020/7/31</font><br />
                </div>
            </div>
            <div class="col-11 element-item mj box-shadow row">
                <div class="col-9">
                    <h6>「求好心人的帮助」</h6>
                    <div class="t1">有小伙伴知道盲文版《穆斯林的葬礼》在哪买吗？淘宝京东都没找到QAQ</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">仓小萌</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">互助答疑</font><br />
                    <font>发帖：</font><font color="dodgerblue">布丁</font><br />
                    <font>日期：</font><font>2020/7/10</font><br />
                </div>
            </div>
            <div class="col-11 element-item rcfx box-shadow row">
                <div class="col-9">
                    <h6>「好书分享」</h6>
                    <div class="t1">最近看了赫胥黎的《美丽新世界》，感受颇深，推荐大家读一下</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">星空</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">悄悄话树洞</font><br />
                    <font>发帖：</font><font color="dodgerblue">Mortonstyle</font><br />
                    <font>日期：</font><font>2020/7/5</font><br />
                </div>
            </div>
            <div class="col-11 element-item jyzp box-shadow row">
                <div class="col-9">
                    <h6>「电话客服招聘」</h6>
                    <div class="t1">周末晚8点至晚12点有空闲时间的小伙伴们点进来看一下~</div>
                    <div class="t2"><font>版主：</font><font color="dodgerblue">樱小桃</font></div>
                </div>
                <div class="col-3 right">
                    <font>板块：</font><font color="dodgerblue">工作招聘</font><br />
                    <font>发帖：</font><font color="dodgerblue">永无名</font><br />
                    <font>日期：</font><font>2020/7/1</font><br />
                </div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="box-shadow" style="height:auto">
            <h5><strong>公告</strong></h5>
            <div>• 新用户入站必看</div>
            <div>• 关于论坛近期事务公示</div>
            <div>• 9月30日网站暂时关闭升级</div>
            <div>• 10月1日双节活动汇总</div>
        </div>

    </div>
</div>

<script>
    var $grid = $('.grid').isotope({
    });
    $('.filter-button-group').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });
</script>